<template>
	<view class="data-statistics">
		<!-- 顶部背景图区域 -->
		<u-image class="bg-image" width="100%" height="283rpx" src="@/static/image/home/data_statistics/bg.png">
		</u-image>
		<!-- 数据统计区域 -->
		<view class="data-count">
			<view class="top-tab">
				<view class="item" :class="current === index ? 'active' : ''" @click="handleActive(item.name, index)"
					v-for="(item, index) in tabList" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="bottom">
				<view class="bottom-item">
					<view class="num">
						{{topData.jieshou_num || 0}}
					</view>
					<view class="title">
						接收数
					</view>
				</view>
				<view class="bottom-item">
					<view class="num">
						{{topData.chuli_num || 0}}
					</view>
					<view class="title">
						处理数
					</view>
				</view>
				<view class="bottom-item">
					<view class="num">
						{{topData.chaoshi_num || 0}}
					</view>
					<view class="title">
						超时次数
					</view>
				</view>
			</view>
		</view>
		<!-- 我的任务模块 -->
		<view class="task-wrap">
			<title-tools title="我的任务" fontSize="30rpx">
				<view class="month" @click="handleShowMonthSelect('task')">
					<text>{{month}}月 </text>
					<u-icon name="arrow-down-fill" color="#fff" size="28"></u-icon>
				</view>
			</title-tools>
			<view class="content-wrap">
				<!-- 环形图表 -->
				<view class="charts-box">
					<!-- <u-circle-progress active-color="#196DFF" :width="260" :border-width="25" :percent="taskData.wanchengdu || 0">
						<view class="u-progress-content">
							<view>{{taskData.wanchengdu || 0}}%</view>
							<text class='u-progress-info'>完成度</text>
						</view>
					</u-circle-progress> -->
					<qiun-data-charts
					    type="arcbar"
					    :chartData="arcbarData"
					    canvasId="wancheglv"
					    :canvas2d="true"
							:opts="arcbarOpts"
					    background="none"
					  />
					<!-- <qiun-data-charts type="column" :chartData="chartData" /> -->
				</view>
				<!-- 右侧数据展示 -->
				<view class="right-data">
					<view class="item">
						<view class="num">
							{{taskData.zong_num || 0}}
						</view>
						<view class="title">
							总计
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{taskData.daiban_num || 0}}
						</view>
						<view class="title">
							待处理
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{taskData.chulizhong_num || 0}}
						</view>
						<view class="title">
							已交办
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{taskData.wancheng_num || 0}}
						</view>
						<view class="title">
							已完成
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 趋势图区域 -->
		<view class="tendency-wrap">
			<title-tools title="近6日任务完成趋势" fontSize="30rpx"></title-tools>
			<view class="charts-box">
				<qiun-data-charts type="area"
					:canvas2d="true"
					canvasId="qushi"
					:opts="{extra:{area:{type:'curve'}},xAxis:{disableGrid: false,boundaryGap:'justify'},legend:{show: false}}"
					:chartData="chartData" />
			</view>
		</view>
		<!-- 热门问题区域 -->
		<!-- <view class="hot-question">
			<title-tools title="热门问题TOP8" fontSize="30rpx">
				<view class="month" @click="handleShowMonthSelect('question')">
					<text>{{myMonth}}月 </text>
					<u-icon name="arrow-down-fill" color="#fff" size="28"></u-icon>
				</view>
			</title-tools>
			<view class="charts-box">
				<qiun-data-charts type="pie"
				 :opts="{dataLabel:false,legend:{position:'right'}}"
				 :chartData="pieChartData"
				/>
			</view>
		</view> -->
		<u-select v-model="showMonthSelect" :list="monthList" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import TitleTools from '@/components/title-tools/TitleTools.vue'
	import { apiGetInformationsTop, apiGetInformationsDay, apiGetInformationsMonth } from '@/api/data/data.js'
	export default {
		name: 'DataStatisticsTwo',
		components: {
			TitleTools
		},
		data() {
			return {
				tabList: [{
						name: '今日'
					},
					{
						name: '本周'
					},
					{
						name: '本月'
					},
					{
						name: '今年'
					}
				],
				data: [],
				topData: {},
				taskData: {},
				//选中标签
				current: 0,
				month: '',
				// myMonth: '',
				monthList: [
					{
						label: '1月',
						value: 1
					},
					{
						label: '2月',
						value: 2
					},
					{
						label: '3月',
						value: 3
					},
					{
						label: '4月',
						value: 4
					},
					{
						label: '5月',
						value: 5
					},
					{
						label: '6月',
						value: 6
					},
					{
						label: '7月',
						value: 7
					},
					{
						label: '8月',
						value: 8
					},
					{
						label: '9月',
						value: 9
					},
					{
						label: '10月',
						value: 10
					},
					{
						label: '11月',
						value: 11
					},
					{
						label: '12月',
						value: 12
					}
				],
				showMonthSelect: false,
				showMonthSelect1: false,
				//打开的下拉框类型
				type: '',
				chartData: {
				},
				arcbarData: {
					
				},
				arcbarOpts: {
					title: {
						name: '0%'
					}
				},
				pieChartData: {
					"series": [{
						"data": [{
								"name": "公积金",
								"value": 50
							},
							{
								"name": "养老待遇",
								"value": 30
							},
							{
								"name": "交通违法",
								"value": 20
							},
							{
								"name": "金融",
								"value": 18
							},
							{
								"name": "运输",
								"value": 8
							},
							{
								"name": "文化旅游",
								"value": 8
							},
							{
								"name": "地产",
								"value": 8
							},
							{
								"name": "医保",
								"value": 8
							}
						]
					}]
				}
			}
		},
		created() {
			const date = new Date();
			this.month = date.getMonth() + 1;
			this.apiGetInformationsTop();
			this.apiGetInformationsDay();
			this.apiGetInformationsMonth();
			uni.$on('updateData2', () => {
				this.apiGetInformationsTop();
				this.apiGetInformationsDay();
				this.apiGetInformationsMonth();
			})
		},
		beforeDestroy() {
			uni.$off('updateData2')
		},
		methods: {
			//tab标签项点击事件
			handleActive(name, index) {
				switch (name){
					case '今日':
					this.topData = this.data.today;
						break;
					case '本周':
					this.topData = this.data.week;
						break;
					case '本月':
					this.topData = this.data.month;
						break;
					case '今年':
					this.topData = this.data.year;
						break;
					default:
						break;
				}
				this.current = index
			},
			//打开月份下拉选择框
			handleShowMonthSelect(type) {
				this.type = type;
				this.showMonthSelect = true;
			},
			//下拉框回调
			confirm(e) {
				this.month = e[0].value;
				this.apiGetInformationsMonth();
			},
			async apiGetInformationsTop () {
				const res = await apiGetInformationsTop();
				this.data = res.data;
				this.topData = this.data.today;
				console.log(res)
			},
			//获取近六日数据
			async apiGetInformationsDay() {
				const res = await apiGetInformationsDay();
				const obj = {
					categories: [
			
					],
					series: [{
						name: "完成量",
						data: [
			
						]
					}]
				}
				res.data.forEach(item => {
					obj.categories.push(item.day);
					obj.series[0].data.push(item.wancheng_num);
				})
				this.chartData = obj;
			},
			//获取完成度数据
			async apiGetInformationsMonth() {
				const res = await apiGetInformationsMonth(this.month);
				this.taskData = res.data;
				
				const obj = {
					series: [{
						data: this.taskData.wanchengdu ? this.taskData.wanchengdu / 100 : 0,
						color: "#196DFF"
					}]
				}
				this.arcbarOpts.title.name = this.taskData.wanchengdu.toFixed(0) + '%';
				this.arcbarData = obj;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data-statistics {
		padding: 20rpx;
	}
	
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}
	
	.data-count {
		padding: 20rpx 30rpx;
		width: 710rpx;
		height: 263rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	
		.top-tab {
			display: flex;
			justify-content: space-around;
			padding-bottom: 27rpx;
			border-bottom: 1px solid #E5E5E5;
	
			.item {
				width: 140rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #000000;
				border-radius: 20rpx;
				transition: .5s;
	
				&.active {
					background: #196EFF;
					color: #fff;
				}
			}
		}
	
		.bottom {
			display: flex;
			justify-content: space-between;
			height: 152rpx;
			padding: 0 50rpx;
	
			.bottom-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
	
				.num {
					font-size: 60rpx;
					font-family: D-DIN;
					font-weight: bold;
					color: #000000;
				}
	
				.title {
					font-size: 26rpx;
					color: #000000;
				}
			}
		}
	}
	
	.task-wrap {
		margin-top: 20rpx;
		padding: 30rpx;
		padding-bottom: 61rpx;
		width: 710rpx;
		height: 424rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	
		.month {
			width: 140rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			color: #fff;
			background: #196EFF;
			border-radius: 20rpx;
	
			text {
				margin-right: 10rpx;
			}
		}
	
		.content-wrap {
			display: flex;
			margin-top: 61rpx;
	
			.charts-box {
				flex-shrink: 0;
				width: 237rpx;
				height: 247rpx;
				text-align: center;
	
				.u-progress-content {
					text-align: center;
	
					view {
						font-size: 60rpx;
						font-family: D-DIN;
						font-weight: bold;
						color: #000000;
					}
	
					.u-progress-info {
						font-size: 26rpx;
						color: #000000;
					}
				}
			}
	
			.right-data {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin-left: 77rpx;
				width: 100%;
	
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 50%;
	
					.num {
						font-size: 60rpx;
						font-family: D-DIN;
						font-weight: bold;
						color: #000000;
					}
	
					.title {
						font-size: 26rpx;
						color: #000000;
					}
				}
			}
		}
	}
	
	// 趋势图区域样式
	.tendency-wrap {
		padding: 30rpx;
		margin-top: 20rpx;
		width: 710rpx;
		height: 406rpx;
		background: #FFFFFF;
		opacity: 0.9;
		border-radius: 20rpx;
	
		.charts-box {
			height: 320rpx;
			width: 650rpx;
		}
	}
</style>
